import React, { useState, useEffect, useRef } from 'react';
import '../messap/RightToolbar.modules.css'; // 引入样式文件

import { useNavigate } from 'react-router-dom';
/**
 * 工具栏项类型定义
 */
interface ToolbarItem {
  id: string; // 唯一标识
  icon: React.ReactNode; // 图标元素
  text: string; // 显示文本
  onClick?: () => void; // 点击事件处理函数
}

/**
 * 消息类型定义
 */
interface Message {
  id: string; // 消息ID
  title: string; // 消息标题
  content: string; // 消息内容
  time: string; // 消息时间
  isRead: boolean; // 是否已读
}

/**
 * 聊天消息类型定义
 */
interface ChatMessage {
  id: string; // 消息ID
  sender: 'user' | 'service'; // 发送者类型
  content: string; // 消息内容
  time: string; // 发送时间
}

/**
 * 右侧工具栏组件
 * 包含消息中心、VIP、活动、招聘、福利和在线客服等功能
 */
const RightToolbar: React.FC = () => {
  // 状态管理
  const [showMessageCenter, setShowMessageCenter] = useState(false); // 控制消息中心显示
  const [showChatPanel, setShowChatPanel] = useState(false); // 控制客服面板显示
  const [showBackToTop, setShowBackToTop] = useState(false); // 是否显示返回顶部按钮
  const [unreadCount, setUnreadCount] = useState(0); // 未读消息数量
  const [messages, setMessages] = useState<Message[]>([]); // 消息列表
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]); // 聊天消息列表
  const [inputMessage, setInputMessage] = useState(''); // 聊天输入框内容
  const [isServiceOnline, setIsServiceOnline] = useState(false); // 客服是否在线
  const chatBoxRef = useRef<HTMLDivElement>(null); // 聊天框引用，用于自动滚动到底部
// 
const navigate=useNavigate()
  // 模拟初始化消息数据
  useEffect(() => {
    // 模拟系统消息
    const mockMessages: Message[] = [
      {
        id: '1',
        title: '系统通知',
        content: '您的账户已成功注册，欢迎使用我们的服务！',
        time: '10:30',
        isRead: false
      },
      {
        id: '2',
        title: '活动提醒',
        content: '新用户专享优惠活动正在进行中，点击查看详情！',
        time: '昨天 14:20',
        isRead: false
      },
      {
        id: '3',
        title: '订单通知',
        content: '您的订单 #123456 已发货，预计明天送达。',
        time: '前天 09:15',
        isRead: true
      }
    ];
    
    setMessages(mockMessages);
    setUnreadCount(mockMessages.filter(msg => !msg.isRead).length);
    
    // 模拟客服在线状态
    const checkServiceStatus = () => {
      const now = new Date();
      const hours = now.getHours();
      const isOnline = hours >= 9 && hours < 18; // 9:00-18:00在线
      setIsServiceOnline(isOnline);
    };
    
    checkServiceStatus();
  }, []);

  // 监听滚动事件，控制返回顶部按钮的显示
  useEffect(() => {
    const handleScroll = () => {
      setShowBackToTop(window.scrollY > 300);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 当聊天消息更新时，自动滚动到底部
  useEffect(() => {
    if (chatBoxRef.current) {
      chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight;
    }
  }, [chatMessages]);

  /**
   * 平滑滚动到页面顶部
   */
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  /**
   * 打开消息中心
   */
  const openMessageCenter = () => {
    setShowMessageCenter(true);
    setShowChatPanel(false); // 确保只显示一个面板
  };

  /**
   * 关闭消息中心
   */
  const closeMessageCenter = () => {
    setShowMessageCenter(false);
  };

  /**
   * 打开客服面板
   */
  const openChatPanel = () => {
    setShowChatPanel(true);
    setShowMessageCenter(false); // 确保只显示一个面板
    
    // 如果客服在线且没有欢迎消息，则发送欢迎消息
    if (isServiceOnline && chatMessages.length === 0) {
      setTimeout(() => {
        setChatMessages(prev => [
          ...prev,
          {
            id: Date.now().toString(),
            sender: 'service',
            content: '您好，请问有什么可以帮您？',
            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
          }
        ]);
      }, 500);
    }
  };

  /**
   * 关闭客服面板
   */
  const closeChatPanel = () => {
    setShowChatPanel(false);
  };

  /**
   * 标记所有消息为已读
   */
  const markAllAsRead = () => {
    const updatedMessages = messages.map(msg => ({
      ...msg,
      isRead: true
    }));
    setMessages(updatedMessages);
    setUnreadCount(0);
  };

  /**
   * 查看全部消息
   */
  const viewAllMessages = () => {
    console.log('跳转到消息中心页面');
    // 实际项目中这里应该导航到消息中心页面
  };

  /**
   * 发送聊天消息
   */
  const sendMessage = () => {
    if (!inputMessage.trim()) return;

    // 添加用户消息
    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      sender: 'user',
      content: inputMessage,
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };
    setChatMessages(prev => [...prev, newMessage]);
    setInputMessage('');

    // 如果客服在线，模拟回复
    if (isServiceOnline) {
      setTimeout(() => {
        const responses = [
          '感谢您的咨询，我们会尽快处理您的问题。',
          '我明白了，还有什么我可以帮您的吗？',
          '这个问题我们已经记录，稍后会有专人联系您。',
          '您的问题我们已经收到，正在为您查询相关信息。'
        ];
        const randomResponse = responses[Math.floor(Math.random() * responses.length)];
        
        setChatMessages(prev => [
          ...prev,
          {
            id: Date.now().toString(),
            sender: 'service',
            content: randomResponse,
            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
          }
        ]);
      }, 1000 + Math.random() * 2000); // 随机延迟1-3秒
    }
  };

  /**
   * 处理键盘事件，按Enter键发送消息
   */
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  /**
   * 工具栏项配置
   */
  const toolbarItems: ToolbarItem[] = [
    {
      id: 'message',
      icon: (
        <div className="icon-wrapper">
          <i className="icon-message">💬</i>
          {unreadCount > 0 && <span className="badge">{unreadCount}</span>}
        </div>
      ),
      text: '消息',
      onClick: openMessageCenter
    },
    {
      id: 'vip',
      icon: <i className="icon-vip">👑</i>,
      text: '企业VIP',
      onClick: () => console.log('企业VIP功能点击')
    },
    {
      id: 'event',
      icon: <i className="icon-event">🧧</i>,
      text: '全场狂欢',
      onClick: () => console.log('全场狂欢活动点击')
    },
    {
      id: 'recruit',
      icon: <i className="icon-recruit">💰</i>,
      text: '招聘',
      onClick: () => console.log('招聘功能点击')
    },
    {
      id: 'welfare',
      icon: <i className="icon-welfare">🎁</i>,
      text: '福利',
      onClick: () => console.log('福利功能点击')
    },
    {
      id: 'service',
      icon: <i className="icon-service">🎧</i>,
      text: '客服',
      onClick: openChatPanel
    }
  ];

  return (
    <div className="right-toolbar">
      {/* 主工具栏区域 */}
      <div className="toolbar-main">
        {toolbarItems.map(item => (
          <div 
            key={item.id} 
            className="toolbar-item" 
            onClick={item.onClick}
            title={item.text}
          >
            <div className="toolbar-icon">{item.icon}</div>
            <div className="toolbar-text">{item.text}</div>
          </div>
        ))}
      </div>

      {/* 返回顶部按钮 */}
      {showBackToTop && (
        <div className="back-to-top" onClick={scrollToTop} title="返回顶部">
          <i className="icon-arrow">⬆️</i>
          <span>返回顶部</span>
        </div>
      )}

      {/* 消息中心弹窗 */}
      {showMessageCenter && (
        <div className="message-center">
          <div className="message-header">
            <span>未读消息</span>
            <div className="message-actions">
              <button className="mark-all-read" onClick={markAllAsRead}>
                全部已读
              </button>
              <button className="close-message" onClick={closeMessageCenter}>
                ×
              </button>
            </div>
          </div>
          
          <div className="message-content">
            {messages.length === 0 ? (
              <div className="empty-message">
                <p>你还没有收到任何消息</p>
                <button className="view-all" onClick={viewAllMessages}>
                  查看全部信息 &gt;&gt;
                </button>
              </div>
            ) : (
              <div className="message-list">
                {messages.map(message => (
                  <div 
                    key={message.id} 
                    className={`message-item ${!message.isRead ? 'unread' : ''}`}
                  >
                    <h4>{message.title}</h4>
                    <p>{message.content}</p>
                    <span className="message-time">{message.time}</span>
                  </div>
                ))}
                <button className="view-all" onClick={viewAllMessages}>
                  查看全部信息 &gt;&gt;
                </button>
              </div>
            )}
          </div>
        </div>
      )}

      {/* 客服面板 */}
      {showChatPanel && (
        <div className="chat-panel">
          <div className="chat-header">
            <span>在线客服</span>
            <button className="close-chat" onClick={closeChatPanel}>
              ×
            </button>
          </div>
          
          <div className="chat-content" ref={chatBoxRef}>
            {!isServiceOnline ? (
              <div className="service-offline">
                <p>当前客服不在线，请在工作时间（9:00-18:00）咨询</p>
                <p>您也可以留言，我们会在上线后第一时间回复</p>
              </div>
            ) : chatMessages.length === 0 ? (
              <div className="empty-chat">
                <p>正在连接客服...</p>
              </div>
            ) : (
              chatMessages.map(message => (
                <div 
                  key={message.id} 
                  className={`chat-message ${message.sender}`}
                >
                  <div className="message-bubble">
                    <p>{message.content}</p>
                    <span className="message-time">{message.time}</span>
                  </div>
                </div>
              ))
            )}
          </div>
          
          <div className="chat-input">
            <textarea
              value={inputMessage}
              onChange={(e) => setInputMessage(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="请输入您的问题..."
              disabled={!isServiceOnline}
            />
            <button 
              onClick={sendMessage} 
              disabled={!inputMessage.trim() || !isServiceOnline}
            >
              发送
            </button>
          </div>
          
          <div className="chat-footer">
            <div className="service-info">
              <h4>企业客服</h4>
              <p>工作时间: 9:00 - 18:00</p>
              <p>当前状态: {isServiceOnline ? '在线' : '离线'}</p>
              <div className="service-options">
                <button>售前咨询</button>
                <button>售后服务</button>
              </div>
            </div>
            
            <div className="quick-links">
              <a onClick={()=>navigate('/freasked')}>常见问题</a>
              <a href="#">意见反馈</a>
              <a href="#">网站声明</a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default RightToolbar;